<template>
  <div class="makeupsNav">
    <div class='rightNav font42'>
      <div>唇妆</div>
      <div>眼线</div>
      <div>眉妆</div>
      <div>定制妆容</div>
    </div>
    <div class="chooseBtns font30" v-if="isShowBtns">
      <router-link to="/details/99">
        <div class="chooseBtn details"></div>
      </router-link>
      <h4>商品详情</h4>
      <router-link to="/camera">
        <div class="chooseBtn camera"></div>
      </router-link>
      <h4>拍照</h4>
    </div>
    <div class="bottomNav">
      <div class="weight  font24">
        <button class="clearBtn">一键还原</button>
        <span>上妆浓度</span>
        <input type="range" id="range" max="100" min="1" @mousemove="changeRange()">
      </div>
      <ul class="bottomList">
        <li @click='showBtns()'>
          <div class="goodImg">
          </div>
          <div class="goodTitle font30">
            MATTE LIPSTICK-CHIL
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>

  export default {
    props: {},
    data(){
      return {
        isShowBtns: false,

      }
    },
    beforeCreate(){
    },
    created(){

    },
    beforeMount(){
    },
    mounted(){
    },
    beforeDestroy(){
    },
    destroyed(){
    },
    methods: {
      showBtns:function(){
        this.isShowBtns = !this.isShowBtns;
      },
      changeRange:function(){
        var value = $('#range').attr('value');
        $('input[type="range"]').css('background-size',value+'% 100%');
      }
    },
    components: {}
  }
</script>
<style scoped>
  .rightNav {
    position: absolute;
    right: 0;
    width: 3.88rem;
    top: 0.36rem;
  }

  .rightNav div {
    border: 0.05rem solid white;
    border-right: none;
    border-radius: 0.15rem 0 0 0.15rem;
    height: 1.7rem;
    margin-bottom: 0.53rem;
    line-height: 1.7rem;
    text-align: center;
    width: 3.78rem;;
  }

  .bottomNav {
    width: 24rem;
    position: absolute;
    bottom: 0.8rem;
    left: 2.9rem;
    /*background-color: red;*/
  }

  .weight {
    height: 0.66rem;
    margin-bottom: 0.49rem;
    /*background-color: red;*/
    position: relative;
  }

  .weight span {
    line-height: 0.62rem;
    margin: 0 0.37rem 0 2.06rem;
  }



input[type="range"] {
  -webkit-appearance: none;/*清除系统默认样式*/
  width: 18.25rem;
  background: -webkit-linear-gradient(#fff, #fff) no-repeat, black;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
  background-size: 50% 100%;/*设置左右宽度比例*/
  height: 0.08rem;/*横条的高度*/
}
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;/*清除系统默认样式*/
    height: 0.6rem;/*拖动块高度*/
    width: 0.6rem;/*拖动块宽度*/
    background: black;/*拖动块背景*/
    border-radius: 50%; /*外观设置为圆形*/
    border:0.08rem solid  #fff; /*设置边框*/
  }

  .clearBtn {
    color: white;
    background-color: rgba(0, 0, 0, 0);
    height: 0.6rem;
    width: 1.85rem;
    border: 0.03rem solid white;
    line-height: 0.6rem;
    vertical-align: top;
  }

  .bottomList {
    background: rgba(0, 0, 0, 0.64);
    border-radius: 0.05rem;
    height: 2.6rem;
    padding: 0 0.6rem;

  }

  .bottomList li {
    width: 3.4rem;
    float: left;
    height: 2.6rem;
  }

  .goodImg {
    background: #d8d8d8;
    border: 0.04rem solid #ffffff;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0.36rem 0.96rem 0.2rem;
  }

  .goodTitle {
    text-align: center;
  }

  .chooseBtns {
    width: 1.3rem;
    position: absolute;
    top: 0.5rem;
    right: 5.03rem;
    /*background-color: red;*/
    text-align: center;
  }

  .chooseBtn {
    border: 0.04rem solid #ffffff;
    width: 1.22rem;
    height: 1.22rem;
    border-radius: 50%;
    margin: 0.25rem 0 0.22rem;
  }

  .chooseBtns h4 {
    margin-bottom: 1.07rem;
  }
</style>
